<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="组名">
              <a-input
                allow-clear
                placeholder="请输入组名"
                v-model="name"
              ></a-input>
            </a-form-item>

            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                type="primary"
                style="margin-left: 10px"
                @click="add('')"
              >新增</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        bordered
        :loading="loading"
        :columns="columns"
        :data-source="dataSource"
        :scroll="{ x: true }"
        :pagination="pagination"
        @change="handleTableChange"
      >

        <template
          slot="action"
          slot-scope="txt, record"
        >
          <a
            class="mr-10"
            @click="add(record)"
          >
            <a-icon type="edit" />编辑
          </a>
          <a
            class="mr-10"
            @click="deleteRecord(record)"
          >
            <a-icon type="delete" />删除
          </a>
        </template>
      </a-table>
      <create
        v-if="showAdd"
        :group="group"
        @close="close"
      ></create>
    </a-card>
  </div>
</template>

<script>
import create from './create.vue'
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
const columns = [
  {
    title: '组名',
    dataIndex: 'name'
  },
  {
    title: '操作',
    width: 130,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create
  },
  data() {
    return {
      columns,
      form: this.$form.createForm(this),
      showAdd: false,
      group: '',
      name: '',
      loading: false,
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  mounted() {
    this.loadData()
  },

  methods: {
    close() {
      this.showAdd = false
      this.loadData(1)
    },
    add(record) {
      this.showAdd = true
      this.group = record
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData(1)
    },
    deleteRecord(record) {
      this.$confirm({
        content: '确定要删除' + record.name + '的账号吗？',
        onOk: () => {
          const data = {
            id: record.id,
            jobNumber: this.jobNumber
          }
          postAction(`${pattern}group/delete`, data).then(data => {
            if (data.code == 200) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg)
            }
          })
        },
        onCancel() {}
      })
    },
    selectChange(brand) {
      this.brand = brand
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData()
    },
    loadData(key) {
      this.loading = true
      const params = {
        size: this.pagination.pageSize
      }
      if (key) {
        params.current = this.pagination.current
      } else {
        params.current = 1
      }
      if (this.name) {
        params.name = this.name
      }
      postAction(`${pattern}group/page`, params).then(data => {
        if (data.code == 200) {
          this.dataSource = data.data.records
          this.pagination.total = data.data.total
          this.pagination.current = data.data.current
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
</style>